<template>
  <div class="step-line">
    <template v-for="(stepItem, index) in stepList">
      <div :key="index" :class="{'step-item': true, 'select': stepIndex === index + 1, 'done': stepItem.status }">
        <div class="step-item-content">
          <div class="step-dot" @click="()=> {handleStepChange(stepItem,index)}">
            <span v-if="stepItem.status" class="el-icon-check" />
            <span v-else>{{ index + 1 }}</span>
          </div>
          <div class="step-txt">
            {{ stepItem.name }}
          </div>
        </div>
        <div class="step-item-line" />
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'StepLine',
  props: {
    stepList: {
      type: Array,
      default: () => [] // name status [done, ongoing, clean ]
    },
    stepIndex: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {

    }
  },
  methods: {
    handleStepChange(e, i) {
      e.status && this.$emit('change', e, i)
    }
  }
}
</script>

<style lang="scss" scoped>
  .step-item {
    color: #bbbbbb;

    &.done {
      .step-item-content{
        color: #6464f0;
      }
      .step-item-content .step-dot{
        border: 1px solid #6464f0;
        color: #6464f0;
        cursor: pointer;
      }
      .step-item-line {
        background-color: #6464f0;
      }
    }
    &.select {
      color: #000;
      .step-item-content .step-dot {
        background-color: #6464f0;
        color: #fff;
        border: 0;
      }
    }

    .step-item-content {
      display: flex;
      align-items: center;

      .step-dot {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #bbbbbb;

        border-radius: 50%;
        margin-right: 10px;
      }
    }
    .step-item-line {
      width: 1px;
      height: 50px;
      background-color: #888;
      margin: 10px 0;
      margin-left: 15px;

    }
    &:last-child .step-item-line{
      display: none;
    }
  }

</style>
